<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>图片缩放JQuery</title>
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(function() {
				{
					$('#big').bind('click', function() {
						var oldwidth = parseInt($('img').width());
						var oldheight = parseInt($('img').height());
						console.log(oldwidth);
						console.log(oldheight);
						var newwidth = oldwidth + 5;
						var newheight = ((newwidth * oldheight) / oldwidth);
						$('img').css('width', newwidth);
						$('img').css('height', newheight);
						console.log("newheight  " + newheight);
						console.log("newwidth: " + newwidth);
					});
				}
				{
					$('#small').bind('click', function() {
						var oldwidth = parseInt($('img').width());
						var oldheight = parseInt($('img').height());
						console.log(oldwidth);
						console.log(oldheight);
						var newwidth = oldwidth - 5;
						var newheight = ((newwidth * oldheight) / oldwidth);
						$('img').css('width', newwidth);
						$('img').css('height', newheight);
						console.log("newheight  " + newheight);
						console.log("newwidth: " + newwidth);
					});
				}
			})
		</script>
	</head>

	<body style="text-align: center;">
		
		<div>
			<input type="button" id="big" value="放大" />
			<input type="button" id="small" value="缩小" />
		</div>
		<img src="img/1d.jpg">
	</body>

</html>